<!-- 考勤统计 -->
<template>
  <a-card :bordered="false">
    <a-form layout="inline" @keyup.enter.native="searchQuery">
      <a-form-item label="标题">
        <a-input v-model="queryParam.title" />
      </a-form-item>
      <a-form-item label="分类">
        <j-dict-select-tag
          v-model="queryParam.type"
          placeholder="请选择"
          dict-code="hr_officedoc_type"
          style="width:180px;"
        >
        </j-dict-select-tag>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
        <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>
    <vxe-grid
      id="OfficedocIssuedList"
      ref="vxeTable"
      v-bind="options"
      :columns="columns"
      :data="dataSource"
      @toolbar-button-click="toolbarButtonClickEvent"
      @checkbox-all="onSelectChange"
      @checkbox-change="onSelectChange"
    >
      <template v-slot:toolbar_buttons>
        <a-button type="primary" icon="plus" v-has="'OfficedocIssuedList:add'" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
        <a-dropdown v-if="selectionRows.length > 0" v-has="'OfficedocIssuedList:del'">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button>批量操作<a-icon type="down" /></a-button>
        </a-dropdown>
      </template>
      <template v-slot:appendix="{ row }">
        <a-dropdown v-if="row.appendix">
          <a >附件<a-icon type="down" /></a>
          <a-menu slot="overlay">
            <template v-for="(file,index) in row.appendix.split(',')">
              <a-menu-item :key="index">
                <a @click.prevent="downloadItem(file)" :href="file">{{file}}</a>
              </a-menu-item>
            </template>
          </a-menu>
        </a-dropdown>
      </template>
      <template v-slot:operate="{ row }">
        <a @click="handleEdit(row)" v-has="'OfficedocIssuedList:edit'">编辑</a>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
          <a-menu slot="overlay">
            <!-- <a-menu-item v-if="row.status === '1'">
              <a @click="handleCheck(row)">审核</a>
            </a-menu-item> -->
            <a-menu-item>
              <a @click="handleDetail(row)">详情</a>
            </a-menu-item>
            <a-menu-item v-has="'OfficedocIssuedList:del'">
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                <a>删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="layouts"
          :current-page.sync="ipagination.currentPage"
          :page-size.sync="ipagination.pageSize"
          :total="ipagination.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
    <officedoc-issued-modal ref="modalForm" @ok="modalFormOk"/>
  </a-card>
</template>
<script >
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import OfficedocIssuedModal from './modal/OfficedocIssuedModal'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import { putAction } from '@/api/manage'
import Axios from 'axios'
export default {
  name: 'OfficedocIssuedList',
  mixins: [VxeTableMixin],
  components: {
    JSelectUserByDep,
    OfficedocIssuedModal
  },
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'title', title: '标题', showOverflow: true },
        { field: 'code', title: '文件编码',showOverflow: true },
        { field: 'type', title: '文件分类', slots: { default: ({ row }) => {
          return filterDictTextByCache('hr_officedoc_type', row.type)
        } }},
        { field: 'status', title: '审核状态', slots: { default: ({ row }) => {
          return filterDictTextByCache('hr_officedoc_status', row.status)
        } }},
        { field: 'outDate', title: '发布时间', showOverflow: true },
        { field: 'topType', title: '置顶', slots: { default: ({ row }) => {
          let text = ''
          switch (row.topType) {
            case '1':
              text = '不置顶'
              break
            case '2':
              text = '置顶'
              break
            case '3':
              text = '永久置顶'
              break
            default:
          }
          return text
        }
        }},
        {
          title: '查看附件',
          field: 'appendix',
          slots: { default: 'appendix' }
        },
        {
          title: '已查阅',
          field: 'readed',
          showOverflow: true
        },
        { field: 'operate', title: '操作', width: 150, slots: { default: 'operate' }}
      ],
      url: {
        list: '/hr/officedoc/list',
        delete: '/hr/officedoc/delete',
        deleteBatch: '/hr/officedoc/deleteBatch',
        edit: '/hr/officedoc/edit'
      },
      isorter: {
        column: '',
        order: ''
      }
    }
  },
  methods: {
    handleCheck(row) {
      row.status = '2'
      this.updateData(row)
    },
    updateData(data) {
      putAction(this.url.edit, data).then(res => {
        if (res.success) {
          this.$message.success('审核成功')
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    downloadItem(filePath) {
      const url = filePath ? window._CONFIG['staticDomainURL'] + '/' + filePath : ''
      Axios.get(url, { responseType: 'blob' })
        .then(({ data }) => {
        // 为了简单起见这里blob的mime类型 固定写死了
          const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = url.split('/').pop()
          link.click()
            .catch(error => {
              console.error(error)
            })
        })
    }
  }
}
</script>
